<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"
    />
    <title>calendar</title>
    <link rel="stylesheet" href="./css/common/reset.css" />
    <link rel="stylesheet" href="./css/common/1px.css" />
    <link rel="stylesheet" href="./css/diao/calendar.min.css" />
    <link rel="stylesheet" href="./components/diao/index.css" />
    <link rel="stylesheet" href="./css/diao/data.css" />
  </head>

  <body>
    <script src="./lib/rem.js"></script>
    <header class="header">
      <div class="header-wrap">
        <a href="javascript:history.go(-1)" class="header-icon"></a>
        <h2 class="header-data">选择日期和人数</h2>
        <span class="header-caption">起价说明</span>
      </div>
    </header>
    <section>
      <div class="calendar active">
        <div class="calendar-content"></div>
        <div class="calendar-header">
          <div class="calendar-year">
            <a class="year-prev switch-btn" href="javascript:;">&lt;</a>
            <a class="calendar-year-txt calendar-title" href="javascript:;" data-value="2020">
              2020
            </a>
            <a class="year-next switch-btn" href="javascript:;">&gt;</a>
          </div>
          <div class="calendar-month">
            <a class="month-prev switch-btn" href="javascript:;">&lt;</a>
            <a class="calendar-month-txt calendar-title" href="javascript:;" data-value="6">07</a>
            <a class="month-next switch-btn" href="javascript:;">&gt;</a>
          </div>
        </div>
        <div class="calendar-week">
          <span class="weekend">日</span>
          <span>一</span>
          <span>二</span>
          <span>三</span>
          <span>四</span>
          <span>五</span>
          <span class="weekend">六</span>
        </div>
        <div class="calendar-list">
          <div>
            <span>
              <a data-calen="2020/5/24" class="prev-m prev-to-month pasted" href="javascript:;">
                24
              </a>
            </span>
            <span>
              <a data-calen="2020/5/25" class="prev-m prev-to-month pasted" href="javascript:;">
                25
              </a>
            </span>
            <span>
              <a data-calen="2020/5/26" class="prev-m prev-to-month pasted" href="javascript:;">
                26
              </a>
            </span>
            <span>
              <a data-calen="2020/5/27" class="prev-m prev-to-month pasted" href="javascript:;">
                27
              </a>
            </span>
            <span>
              <a data-calen="2020/5/28" class="prev-m prev-to-month pasted" href="javascript:;">
                28
              </a>
            </span>
            <span>
              <a data-calen="2020/5/29" class="prev-m prev-to-month pasted" href="javascript:;">
                29
              </a>
            </span>
            <span>
              <a data-calen="2020/5/30" class="prev-m prev-to-month pasted" href="javascript:;">
                30
              </a>
            </span>
            <span>
              <a data-calen="2020/5/31" class="prev-m prev-to-month pasted" href="javascript:;">
                31
              </a>
            </span>
            <span><a data-calen="2020/6/1" href="javascript:;">1</a></span>
            <span><a data-calen="2020/6/2" href="javascript:;">2</a></span>
            <span><a data-calen="2020/6/3" href="javascript:;">3</a></span>
            <span><a data-calen="2020/6/4" href="javascript:;">4</a></span>
            <span><a data-calen="2020/6/5" href="javascript:;">5</a></span>
            <span><a data-calen="2020/6/6" href="javascript:;" class="weekend">6</a></span>
            <span><a data-calen="2020/6/7" href="javascript:;" class="weekend">7</a></span>
            <span><a data-calen="2020/6/8" href="javascript:;">8</a></span>
            <span><a data-calen="2020/6/9" href="javascript:;">9</a></span>
            <span><a data-calen="2020/6/10" href="javascript:;">10</a></span>
            <span><a data-calen="2020/6/11" href="javascript:;">11</a></span>
            <span><a data-calen="2020/6/12" href="javascript:;">12</a></span>
            <span><a data-calen="2020/6/13" href="javascript:;" class="weekend">13</a></span>
            <span><a data-calen="2020/6/14" href="javascript:;" class="weekend">14</a></span>
            <span><a data-calen="2020/6/15" href="javascript:;">15</a></span>
            <span><a data-calen="2020/6/16" href="javascript:;">16</a></span>
            <span><a data-calen="2020/6/17" href="javascript:;">17</a></span>
            <span><a data-calen="2020/6/18" href="javascript:;">18</a></span>
            <span><a data-calen="2020/6/19" href="javascript:;">19</a></span>
            <span><a data-calen="2020/6/20" href="javascript:;" class="weekend">20</a></span>
            <span><a data-calen="2020/6/21" href="javascript:;" class="weekend">21</a></span>
            <span><a data-calen="2020/6/22" href="javascript:;">22</a></span>
            <span><a data-calen="2020/6/23" href="javascript:;">23</a></span>
            <span><a data-calen="2020/6/24" href="javascript:;">24</a></span>
            <span><a data-calen="2020/6/25" href="javascript:;">25</a></span>
            <span><a data-calen="2020/6/26" href="javascript:;">26</a></span>
            <span><a data-calen="2020/6/27" href="javascript:;" class="weekend">27</a></span>
            <span><a data-calen="2020/6/28" href="javascript:;" class="weekend">28</a></span>
            <span><a data-calen="2020/6/29" href="javascript:;">29</a></span>
            <span><a data-calen="2020/6/30" href="javascript:;">30</a></span>
            <span>
              <a data-calen="2020/7/1" class="next-m next-to-month pasted" href="javascript:;">1</a>
            </span>
            <span>
              <a data-calen="2020/7/2" class="next-m next-to-month pasted" href="javascript:;">2</a>
            </span>
            <span>
              <a data-calen="2020/7/3" class="next-m next-to-month pasted" href="javascript:;">3</a>
            </span>
            <span>
              <a data-calen="2020/7/4" class="next-m next-to-month pasted" href="javascript:;">4</a>
            </span>
          </div>
          <div>
            <span>
              <a data-calen="2020/6/28" class="prev-m prev-to-month pasted" href="javascript:;">
                28
              </a>
            </span>
            <span>
              <a data-calen="2020/6/29" class="prev-m prev-to-month pasted" href="javascript:;">
                29
              </a>
            </span>
            <span>
              <a data-calen="2020/6/30" class="prev-m prev-to-month pasted" href="javascript:;">
                30
              </a>
            </span>
            <span><a data-calen="2020/7/1" href="javascript:;">1</a></span>
            <span><a data-calen="2020/7/2" href="javascript:;">2</a></span>
            <span><a data-calen="2020/7/3" href="javascript:;">3</a></span>
            <span><a data-calen="2020/7/4" href="javascript:;" class="weekend">4</a></span>
            <span><a data-calen="2020/7/5" href="javascript:;" class="weekend">5</a></span>
            <span><a data-calen="2020/7/6" href="javascript:;">6</a></span>
            <span><a data-calen="2020/7/7" href="javascript:;">7</a></span>
            <span><a data-calen="2020/7/8" href="javascript:;" class="today">8</a></span>
            <span><a data-calen="2020/7/9" href="javascript:;">9</a></span>
            <span><a data-calen="2020/7/10" href="javascript:;">10</a></span>
            <span><a data-calen="2020/7/11" href="javascript:;" class="weekend">11</a></span>
            <span><a data-calen="2020/7/12" href="javascript:;" class="weekend">12</a></span>
            <span><a data-calen="2020/7/13" href="javascript:;">13</a></span>
            <span><a data-calen="2020/7/14" href="javascript:;">14</a></span>
            <span><a data-calen="2020/7/15" href="javascript:;">15</a></span>
            <span><a data-calen="2020/7/16" href="javascript:;">16</a></span>
            <span><a data-calen="2020/7/17" href="javascript:;">17</a></span>
            <span><a data-calen="2020/7/18" href="javascript:;" class="weekend">18</a></span>
            <span><a data-calen="2020/7/19" href="javascript:;" class="weekend">19</a></span>
            <span><a data-calen="2020/7/20" href="javascript:;">20</a></span>
            <span><a data-calen="2020/7/21" href="javascript:;">21</a></span>
            <span><a data-calen="2020/7/22" href="javascript:;">22</a></span>
            <span><a data-calen="2020/7/23" href="javascript:;">23</a></span>
            <span><a data-calen="2020/7/24" href="javascript:;">24</a></span>
            <span><a data-calen="2020/7/25" href="javascript:;" class="weekend">25</a></span>
            <span><a data-calen="2020/7/26" href="javascript:;" class="weekend">26</a></span>
            <span><a data-calen="2020/7/27" href="javascript:;">27</a></span>
            <span><a data-calen="2020/7/28" href="javascript:;">28</a></span>
            <span><a data-calen="2020/7/29" href="javascript:;">29</a></span>
            <span><a data-calen="2020/7/30" href="javascript:;">30</a></span>
            <span><a data-calen="2020/7/31" href="javascript:;">31</a></span>
            <span>
              <a data-calen="2020/8/1" class="next-m next-to-month pasted" href="javascript:;">1</a>
            </span>
            <span>
              <a data-calen="2020/8/2" class="next-m next-to-month pasted" href="javascript:;">2</a>
            </span>
            <span>
              <a data-calen="2020/8/3" class="next-m next-to-month pasted" href="javascript:;">3</a>
            </span>
            <span>
              <a data-calen="2020/8/4" class="next-m next-to-month pasted" href="javascript:;">4</a>
            </span>
            <span>
              <a data-calen="2020/8/5" class="next-m next-to-month pasted" href="javascript:;">5</a>
            </span>
            <span>
              <a data-calen="2020/8/6" class="next-m next-to-month pasted" href="javascript:;">6</a>
            </span>
            <span>
              <a data-calen="2020/8/7" class="next-m next-to-month pasted" href="javascript:;">7</a>
            </span>
            <span>
              <a data-calen="2020/8/8" class="next-m next-to-month pasted" href="javascript:;">8</a>
            </span>
          </div>
          <div>
            <span>
              <a data-calen="2020/7/26" class="prev-m prev-to-month pasted" href="javascript:;">
                26
              </a>
            </span>
            <span>
              <a data-calen="2020/7/27" class="prev-m prev-to-month pasted" href="javascript:;">
                27
              </a>
            </span>
            <span>
              <a data-calen="2020/7/28" class="prev-m prev-to-month pasted" href="javascript:;">
                28
              </a>
            </span>
            <span>
              <a data-calen="2020/7/29" class="prev-m prev-to-month pasted" href="javascript:;">
                29
              </a>
            </span>
            <span>
              <a data-calen="2020/7/30" class="prev-m prev-to-month pasted" href="javascript:;">
                30
              </a>
            </span>
            <span>
              <a data-calen="2020/7/31" class="prev-m prev-to-month pasted" href="javascript:;">
                31
              </a>
            </span>
          </div>
          <div class="calendar-months">
            <span><a data-value="0" href="javascript:;">01</a></span>
            <span><a data-value="1" href="javascript:;">02</a></span>
            <span><a data-value="2" href="javascript:;">03</a></span>
            <span><a data-value="3" href="javascript:;">04</a></span>
            <span><a data-value="4" href="javascript:;">05</a></span>
            <span><a data-value="5" href="javascript:;">06</a></span>
            <span><a data-value="6" href="javascript:;">07</a></span>
            <span><a data-value="7" href="javascript:;">08</a></span>
            <span><a data-value="8" href="javascript:;">09</a></span>
            <span><a data-value="9" href="javascript:;">10</a></span>
            <span><a data-value="10" href="javascript:;">11</a></span>
            <span><a data-value="11" href="javascript:;">12</a></span>
          </div>
          <div
            class="calendar-years"
            style="width: 1200%; transform: translate3d(-66.6667%, 0px, 0px);"
          ></div>
        </div>
      </div>

      <div class="form-wrap">
        <div class="form-adult">
          <span class="form-man">成人</span>
          <span class="form-price">¥3159/人</span>
          <div class="form-num">
            <span class="form-add">-</span>
            <span class="form-text">2</span>
            <span class="form-dec">+</span>
          </div>
        </div>
        <div class="form-adult">
          <span class="form-man">成人</span>
          <div class="form-num">
            <span class="form-add">-</span>
            <span class="form-text">0</span>
            <span class="form-dec">+</span>
          </div>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" />
          <p class="form-check-caption">
            携带幼儿
            <span>0~2岁</span>
          </p>
        </div>

        <div class="form-caption">
          <span class="form-caption-icon"></span>
          <p class="form-caption-text">
            最少1人起订，年龄2—12周岁，不占床，不含早，只含当地的正餐半餐、车位以及导服，其他需要自理。成人+儿童最多支持9人，
          </p>
        </div>
      </div>
    </section>

    <footer class="footer">
      <div class="footer-left">
        <p>
          总额：¥6318
          <span>明细></span>
        </p>
      </div>
      <div class="footer-right">
        <p>
          下一步
          <span>选择资源</span>
        </p>
      </div>
    </footer>

    <script src="./js/diao/calendar.min.js"></script>
  </body>
</html>
